<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center selectIdentity_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center selectIdentity_fd0_0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<image class='selectIdentity_fd0_0_c0' mode="aspectFit" :src='STATIC_URL+"10.png"'></image>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout selectIdentity_flex_1">
				<text class='selectIdentity_fd1_0'>请选择您的身份</text>
				<view class='flex flex-direction flex-wrap align-center'>
					<!-- <benben-select-diy ref="showSelectPopup1695691651080" class-name='flex flex-direction flex'
						:items.sync="selsct" v-model="id" default-type="value" default-label="name"
						:allow-cancel='false' type="radio" :disabled='false'> -->
						<view v-for='(item,key0) in selsct' :key="key0" @click="chooseShenfen(key0,item)">
							<view
								class='flex flex-direction align-center flex selectIdentity_fd1_1_c0_c0'>
								<view
									class='flex flex-direction flex-wrap align-center justify-center' :class="{selectIdentity_fd1_1_c0_c0_c0:currentIndex == key0}">
									<image class='selectIdentity_fd1_1_c0_c0_c0_c0' mode="aspectFit" :src='item.image'>
									</image>
								</view>
								<text class='selectIdentity_fd1_1_c0_c0_c1'>{{item.name}}</text>
							</view>
						</view>
						<!-- </benben-select-diy> -->
				</view>
			</view>

			<!---flex布局flex布局结束-->


		</view>
	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				currentIndex:0,
				"selsct": [{
					"name": "我是租客",
					"value": "1",
					"image": require('@/static/images/11.png')
				}, {
					"name": "我是房东",
					"value": "2",
					"image": require('@/static/images/11.png')
				}],
				"id": ""
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {

		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			chooseShenfen(index){
				this.currentIndex = index
				if(index == 0){
					uni.switchTab({
						url:'/pages/tabBar/home/home'
					})
				}else{
					uni.navigateTo({
						url:'/pages/grzx/landlordCertification/landlordCertification'
					})
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.selectIdentity_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
	}

	.selectIdentity_fd0_0_c0 {
		width: 24rpx;
		height: 24rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.selectIdentity_fd0_0 {
		margin: 0rpx 0rpx 0rpx 32rpx;
	}

	.selectIdentity_flex_1 {
		padding: 60rpx 32rpx 0rpx 32rpx;
	}

	.selectIdentity_fd1_1_c0_c1_c0 {
		background: #FFFFFF;
		width: 265rpx;
		height: 265rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.selectIdentity_fd1_1_c0_c0_c1 {
		margin: 29rpx 0rpx 0rpx 0rpx;
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.selectIdentity_fd1_1_c0_c0_c0_c0 {
		width: 260rpx;
		height: 260rpx;
		border-radius: 24rpx;
	}

	.selectIdentity_fd1_1_c0_c0_c0 {
		background: #EA6A82;
		width: 265rpx;
		height: 265rpx;
		border-radius: 24rpx;
	}

	.selectIdentity_fd1_1_c0_c0 {
		margin: 0rpx 0rpx 80rpx 0rpx;
	}

	.selectIdentity_fd1_0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
		margin: 0rpx 0rpx 122rpx 0rpx;
	}
</style>